<template>
	<view class="container">
		<!-- <view class="title">绝对定位小球动画</view> -->

		<!-- 按钮网格（绝对定位） -->
		<!-- <view class="buttons-grid" :style="{ left: gridLeft + 'px', top: gridTop + 'px' }">
			<button v-for="i in 300" :key="i" @click="startFromButton($event,i)" class="grid-btn" :style="getButtonStyle(i)">
				{{ i }}
			</button>
		</view> -->

		<!-- 终点标记 -->
		<!-- <view class="end-point" :style="{ left: endX + 'px', top: endY + 'px' }">
			终点
		</view> -->

		<!-- 小球元素 -->
		<view v-if="isMoving" class="ball" :style="{ left: ballX + 'px', top: ballY + 'px' }"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 小球位置
				ballX: 0,
				ballY: 0,

				// 终点位置
				endX: 300,
				endY: 100,

				// 网格参数（绝对定位）
				gridLeft: 20, // 网格左侧距离
				gridTop: 150, // 网格顶部距离
				buttonSize: 40, // 按钮尺寸
				gridGap: 5, // 按钮间距

				// 动画状态
				isMoving: false,
				animationInterval: null,
			};
		},
		props: {
			endPosition: {
				type: Object, // 数字类型
				required: true, // 必填项
				default: null // 默认值
			},
		},
		methods: {
			// 获取按钮的样式（绝对定位）
			// getButtonStyle(index) {
			// 	const row = Math.floor((index - 1) / 10);
			// 	const col = (index - 1) % 10;

			// 	return {
			// 		left: col * (this.buttonSize + this.gridGap) + 'px',
			// 		top: row * (this.buttonSize + this.gridGap) + 'px',
			// 		width: this.buttonSize + 'px',
			// 		height: this.buttonSize + 'px'
			// 	};
			// },

			// 从按钮位置开始动画
			startFromButton(e, index) {
				const touch = e.touches[0] || e.changedTouches[0];
				if (this.endPosition) {
					this.endX = this.endPosition.endX
					this.endY = this.endPosition.endY
				}

				if (touch) {
					this.coords = {
						// 相对于视口的坐标
						clientX: touch.clientX,
						clientY: touch.clientY,
						// 相对于页面的坐标（包含滚动距离）
						pageX: touch.pageX,
						pageY: touch.pageY,
						// 相对于屏幕的坐标
						screenX: touch.screenX,
						screenY: touch.screenY
					};

					console.log(`按钮点击坐标:`, this.coords);
				}

				// this.currentButton = index;

				// 停止当前动画
				if (this.isMoving) {
					clearInterval(this.animationInterval);
				}

				// 计算按钮位置
				// const row = Math.floor((index - 1) / 10);
				// const col = (index - 1) % 10;

				// // 计算按钮中心位置（带偏移调整）
				// this.buttonCenterX = this.gridLeft + col * (this.buttonSize + this.gridGap) + this.buttonSize / 2 +
				// 	this
				// 	.offsetX;
				// this.buttonCenterY = this.gridTop + row * (this.buttonSize + this.gridGap) + this.buttonSize / 2 + this
				// 	.offsetY;

				// 设置小球起点
				// this.ballX = this.buttonCenterX;
				// this.ballY = this.buttonCenterY;

				this.ballX = this.coords.clientX;
				this.ballY = this.coords.clientY;

				console.log('ballX:', this.ballX, 'ballY:', this.ballY)

				// 开始动画
				this.startAnimation();
			},

			// 动画实现
			startAnimation() {
				this.isMoving = true;
				let step = 0;
				const totalSteps = 60;

				const startX = this.ballX;
				const startY = this.ballY;
				const xStep = (this.endX - startX) / totalSteps;
				const yStep = (this.endY - startY) / totalSteps;

				this.animationInterval = setInterval(() => {
					step++;
					const progress = step / totalSteps;

					// 抛物线运动
					this.ballX = startX + xStep * step;
					const arcHeight = Math.sin(progress * Math.PI) * 100; // 抛物线高度
					this.ballY = startY + yStep * step - arcHeight;

					if (step >= totalSteps) {
						this.ballX = this.endX;
						this.ballY = this.endY;
						clearInterval(this.animationInterval);
						this.isMoving = false;
					}
				}, 20);
			}
		},
		mounted() {
			// 确保终点在可视范围内
			// if (typeof window !== 'undefined' && window.innerWidth < 400) {
			// 	this.endX = window.innerWidth - 60;
			// }
		},
		beforeUnmount() {
			if (this.animationInterval) {
				clearInterval(this.animationInterval);
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 10px;
		background-color: #f9f9f9;
		min-height: 100vh;
		position: relative;
	}

	.title {
		text-align: center;
		font-size: 18px;
		margin: 10px 0;
		color: #333;
	}

	/* 按钮网格（绝对定位容器） */
	.buttons-grid {
		/* position: absolute; */
		margin-left: 200px;
		margin-top: 200px;
		position: relative;
	}

	/* 按钮样式（绝对定位） */
	.grid-btn {
		position: absolute;
		background-color: #4285f4;
		color: white;
		border: 1px solid #3367d6;
		font-size: 10px;
		border-radius: 3px;
		cursor: pointer;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 小球样式 */
	.ball {
		position: absolute;
		width: 20px;
		height: 20px;
		background-color: #ff0000;
		border-radius: 50%;
		z-index: 10;
		display: none;
		transform: translate(-50%, -50%);
	}

	/* 终点标记 */
	.end-point {
		position: absolute;
		width: 60px;
		height: 30px;
		background-color: #00ff00;
		color: #333;
		font-size: 12px;
		text-align: center;
		line-height: 30px;
		border-radius: 5px;
		z-index: 5;
		transform: translate(-50%, -50%);
	}


	/* 调试用的按钮中心点 */
	.debug-dots {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 8;
	}

	.debug-dot {
		position: absolute;
		width: 6px;
		height: 6px;
		background-color: #ffff00;
		border-radius: 50%;
		transform: translate(-50%, -50%);
	}
</style>